import React from "react";
import {Map} from 'immutable';
import { PureComponent } from '../utils';
class App extends React.Component {
    state = { counter: Map({number:0}) }
    render() {
        return (
            <div>
                <ClassCounter counter={this.state.counter} />
                <button onClick={() => {
                     //希望有一种方案写起来简单，也能返回新对象正常使用，也省内存
                    let newCounter = this.state.counter.set('number',this.state.counter.get('number')+1);
                    this.setState({counter:newCounter});
                    //不能直接修改老的对象
                    //let counter = this.state.counter;
                    //counter.a1.a2.a3 = 1;//1.是简单，明直接，最容易阅读，但是不能用
                    //this.setState({counter:{number:this.state.counter.number+1}});
                    //2.也挺简单的，但是浪费内存
                    //let counter = JSON.parse( JSON.stringify(this.state.counter));
                    //counter.a1.a2.a3 = 1;
                    //3.能用，也不浪费内存，但是不简单
                    /* this.setState({counter:{
                        ...counter,
                        a1:{
                            ...counter.a1,
                            a2:{
                                ...counter.a1.a2,
                                a3:1
                            }
                        }
                    }}); */
                   
                }
                }>+1</button>
                <button onClick={()=>{
                    let newCounter = this.state.counter
                    .set('number',this.state.counter.get('number'));
                    this.setState({counter:newCounter});
                }}>+0</button>
            </div>
        )
    }
}
class ClassCounter extends PureComponent {
    render() {
        console.log(`ClassCounter render`);
        return <div>{this.props.counter.get('number')}</div>
    }
}
export default App;